// * 我已提供了相关的素材图片，请完成相关的html页面布局部分
  // * 果树从种子到成熟共分5级，每级所需的浇水量逐步增长
  // * 每次浇水提示给用户到下一级剩余的百分比，升级后显示新图片
  // * 用class思想完成
  // * 完成以上用户交互操作，和界面的功能
  // * 如果已经达到最高级，则显示结束，并不能继续浇水
  // * 如果能力可以胜任，请添加浇水的动画效果

  // 果树
  class Tree {
    // 溢出的经验值
    static EXPS = [100, 150, 210, 280, 390]
    #level = 1
    #exp = 0
    constructor() {
      this.plant = document.querySelector('.plant')
      this.pot = document.querySelector('.demo-pot')
      this.water = document.querySelector('.water')
      this.h1 = document.querySelector('h1')
      this.pot.addEventListener(
        'click',
        // this.handleClick.bind(this)
        // () => this.handleClick()
        this.handleClick
      )
      this.pot.querySelector('img')
        .addEventListener('animationend',
          this.handleAnimationEnd)
      this.render()
    }

    handleClick = () => {
      if (this.#level === 6) return
      this.pot.classList.add('demo-pot-animation')
    }
    handleAnimationEnd = () => {
      this.water.classList.add('show')
      setTimeout(() => {
        this.pot.classList.remove('demo-pot-animation')
        this.water.classList.remove('show')
        this.watering(130)
        this.render()
      }, 500);
    }

    // 浇水
    watering(amount /** 浇水的量 */) {
      if (this.#level < 6) {
        const exp = this.#exp + amount
        const max = Tree.EXPS[this.#level - 1]
        if (exp >= max) {
          this.#level += 1
          this.#exp = 0
        } else {
          this.#exp = exp
        }
      }
    }

    render() {
      this.h1.innerText = this.toString()
      this.plant.querySelector('img').src =
        `./images/plant-${this.#level - 1}.png`
    }

    toString() {
      return (
        this.#level === 6 ?
        '水果成熟了，可以收获了' :
        `当前等级${this.#level}，还差${
          ((1-this.#exp/Tree.EXPS[this.#level - 1])*100)
            .toFixed(2)
        }%的水量升级。`
      )
    }
  }